$(function(){
/* -----------------------------修改播放器颜色-------------------------------- */
	/* 音频标签 */
	var myAudio = document.getElementById("myAudio");
	/* 当前播放歌曲的序号 - (0~musicData.length-1) */
	var index = 0;
	/* 页面加载完毕事件处理函数 */
	window.onload = function(){
		$('#myAudio').prop('src',musicData[index].url);
		/* 默认样式 */
		$('.ul li').eq(index).addClass('active');
		getSongInf(0)
	}
	/* 禁用此元素 */
	$('#color').hide();
	/* 修改播放器颜色 */
	var m = 0;
	$('#bgc').on('click',function(){
		/* 如果是隐藏点击之后会显示 */
		if(m == 0){
			$('#color').show();
			/* 给color绑定拖动事件 */
			$('#color').on('input',function(){
				$('.header').css('background',$(this).val()) 
				$('.audioPlay').css('background',$(this).val())
				$('.playlist').css('border-top','20px solid $(this).val()')
			})	
			m = 1;
			$('#bgc').prop('title','再次单击可隐藏皮肤选项')
		}else if(m == 1){/* 如果是显示点击之后会隐藏 */
			$('#color').hide()
			m = 0;
			$('#bgc').prop('title','单击选择你喜欢的颜色')
		}	
	})
/* ----------------------------创建并获取音频数据------------------------------ */
	/* 获取歌曲数 */
	$('h6 span').text(musicData.length);
	for (var i = 0; i < musicData.length; i++) {
		/* 获取每一首个的数据 */
		var item = musicData[i];
		/* 创建li标签同时将获取到的歌曲名和歌手保存进li中 */
		var li = $(`<li>${item.song}  ${item.singer}</li>`);
		$('.ul').append(li)
	}
	/* 给li绑定点击事件 */
	$('.ul li').click(function(){
		/* 获取下标 */
		index = $(this).index();
		/* 播放音乐 */
		playMusic(index);
		$('#playOrPause').get(0).className = 'fa fa-pause';
		$('#playOrPause').prop('title','暂停');
		getSongInf(index);
	})
/* -----------------点击触发事件函数(播放和暂停的切换)(上一首)(下一首)---------------- */
	/* 播放个暂停图标和功能的切换 */
	myAudio = document.getElementById("myAudio");
	$('#playOrPause').click(function(){
		/* 通过paused属性判断歌曲是否在播放 */
		if(myAudio.paused){
			myAudio.play();
			this.className = 'fa fa-pause'
			$('#playOrPause').prop('title','暂停');
			$('#cover').addClass('coverCss')
		}else{
			myAudio.pause();
			this.className = 'fa fa-play';
			$('#playOrPause').prop('title','播放');
			$('#cover').removeClass('coverCss')
		}
	})
	/* 播放完成以后触发的函数 */
	myAudio.onended = function(){
		/* 播放完成以后将暂停键切换成播放键 */
		$('#playOrPause').get(0).className = 'fa fa-play';
	}
	/* 播放音乐 */
	function playMusic(index){
		/* 修改音频标签的src值 */
		$('audio').prop('src',musicData[index].url)
		/* 开始播放 */
		$('audio').get(0).play();
		/* 重置背景色-去掉所有的li的背景色 */
		$('.ul li').removeClass('active');
		/* 给当前播放的歌曲添加背景色 */
		$('.ul li').eq(index).addClass('active');
	}
	/* 上一首 */
	$('#prevSong').click(function(){
		index --;
		if(index == -1){
			index = musicData.length-1;
		}
		/* 播放音乐 */
		playMusic(index);
		getSongInf(index)
		/* 同时将播放键改为暂停键 */
		$('#playOrPause').get(0).className = 'fa fa-pause';
	})
	/* 下一首 */
	$('#nextSong').click(function(){
		index ++;
		if(index == musicData.length){
			index = 0;
		}
		/* 播放音乐 */
		playMusic(index);
		getSongInf(index)
		/* 同时将播放键改为暂停键 */
		$('#playOrPause').get(0).className = 'fa fa-pause';
	})
/* ----------------播放时触发的事件处理函数(进度条)(歌曲时长)(当前歌曲时间)------------- */
	/* 时间处理函数 */
	function switchTime(t){
		/* 将获取的时间取整 */
		var s = Math.floor(t);
		/* 将获取的时间转化为小时 */
		var h = Math.floor(t/3600);
		/* 将获取的时间转化为分钟 */
		var m = Math.floor(t%3600/60);
		/* 将获取的时间转化为秒 */
		var s = s%60;
		return (h>0?(h+':'):'')+(m>9?(m+':'):('0'+m+':'))+(s>9?s:("0"+s));
	}
	/* 在持续事件中获取当前时间 */
	myAudio.ontimeupdate = function(){
		/* 修改标签内容 */
		$('#currenTime').text(switchTime(myAudio.currentTime));
		/* 修改歌曲的value */
		$('#progress').val(Math.floor(myAudio.currentTime));
		
		/* 伴随持续时间给歌词li添加样式 */
		var lyricLi = $('#lyricUl>li');
		var windowUl = $('.boxWindowSonger ul');
		for (var i = 0; i < lyricLi.length; i++) {
			if(Math.floor(myAudio.currentTime) == lyricLi.eq(i).attr('startTime')){
				lyricLi.removeClass('changesss');
				lyricLi.eq(i).addClass('changesss');
				windowUl.empty();
				lyricLi.eq(i).clone().appendTo(windowUl);
				$('.lyricContent').get(0).scrollTop = (i - 4) * 33;
			}
		}
		
	}
	/* 获取歌曲总时长 */
	myAudio.oncanplaythrough = function(){
		/* 修改标签内容 */
		$('#duration').text(switchTime(myAudio.duration));
		/* 修改歌曲的最大值 */
		document.getElementById("progress").max = Math.floor(myAudio.duration)
	}
	/* 进度条拖动事件 */
	$('#progress').click(function(){
		/* 拖动的时候修改标签内容 */
		document.getElementById("currenTime").innerText = switchTime(this.value);
		/* 拖动的时候修改歌曲的播放位置 */
		myAudio.currentTime = this.value;
		
	})
/* -------------------------------------静音/正常音量----------------------------------------- */
	/* 静音与正常音量 */
	var n = 0;
	$('#volume').click(function(){
		if(n == 0){
			document.getElementById("volume").className = 'fa fa-bell-slash';
			myAudio.volume = 0;
			n = 1;
		}else if(n == 1){
			document.getElementById("volume").className = 'fa fa-bell';
			myAudio.volume = 0.5;
			n = 0;
		}
	})
	/* 音量条拖动事件 */
	$('#volumeInput').on('input',function(){
		if(document.getElementById("volumeInput").value == 0){
			document.getElementById("volume").className = 'fa fa-bell-slash';
			myAudio.volume = 0;
		}else{
			document.getElementById("volume").className = 'fa fa-bell';
			myAudio.volume = document.getElementById("volumeInput").value;
		}
	})
/* -----------------------------------播放器模式切换-------------------------------------- */
	/* 播放模式的切换 */
	var indic = 0;
	$('#playMode').click(function(){
		indic ++;
		indic == 4?indic = 0:'';
		if(indic == 0){
			$('#playMode').prop('title','顺序播放');
			document.getElementById("playMode").className = 'fa fa-list';
			console.log('顺序播放'+indic);
		}else if(indic == 1){
			$('#playMode').prop('title','单曲循环');
			document.getElementById("playMode").className = 'fa fa-undo';
			console.log('单曲循环'+indic);
		}else if(indic == 2){
			$('#playMode').prop('title','随机播放');
			document.getElementById("playMode").className = 'fa fa-random';
			console.log('随机播放'+indic);
		}else if(indic == 3){
			$('#playMode').prop('title','列表循环');
			document.getElementById("playMode").className = 'fa fa-refresh';
			console.log('列表循环'+indic);
		}
	})
	/* 模式对播放完成之后的歌曲的影响 */
	myAudio.onended = function(){
		if(indic == 1){
			playMusic(index);
			getSongInf(index)
			console.log('现在是单曲循环的下一首');
		}else if(indic == 2){
			index = parseInt(Math.random()*musicData.length);
			playMusic(index);
			getSongInf(index)
			console.log('现在是随机播放的下一首');
		}else if(indic == 3){
			index ++;
			if(index == musicData.length){
				index = 0;
			}
			playMusic(index);
			getSongInf(index)
			console.log('现在是列表循环的下一首');
		}if(indic == 0){
			index ++;
			if(index < musicData.length){
				playMusic(index);
				getSongInf(index)
			}else{
				index = 0;
			}
			console.log('现在是顺序播放的下一首');
		}
		$('#playOrPause').get(0).className = 'fa fa-pause';
	}
/* -----------------------------------显示个隐藏播放列表-------------------------------------- */
	/* 隐藏播放列表 */
	$('.playlist').hide();
	$('.historyPlay').hide();
	var PaP = 0;
	/* 添加显示和隐藏效果 */
	$('#playListButton').click(function(){
		if( PaP == 0){
			$('.playlist').show();
			$('.historyPlay').hide();
			PaP = 1;
			$('#playListButton').attr('title','隐藏当前播放列表')
		}else if( PaP == 1){
			$('.playlist').hide();
			$('.historyPlay').hide();
			PaP = 0;
			$('#playListButton').attr('title','显示当前播放列表')
		}
		$('.h5').click(function(){
			$('.playlist').show()
			$('.oldh5').addClass('active')
			$('.h5').removeClass('active')
			$('.historyPlay').hide()
		})
		$('.oldh5').click(function(){
			$('.historyPlay').show()
			$('.h5').addClass('active')
			$('.oldh5').removeClass('active')
		})
	})
/* -----------------------------------歌词部分-------------------------------------- */
	/* 高阶函数 - 函数的参数又是一个函数 */
	/* musicData.forEach(function(item,index,musicData){}) */
	/*                              |    |      |   */
	/*                              |    |      |   */
	/*         函数的参数值永远都是  元素 下标  他本身 */
	// musicData.forEach(function(item){
	// 	console.log(item);
	// })
	/* 根据获取的下标对歌词进行操作 */
	function getSongInf(index){
		var  songObj = musicData[index];
		/* 显示歌曲相关信息 */
		$('.lyricSong').text(songObj.song);
		$('.lyricAlbum').text('专辑：'+songObj.album);
		$('.lyricSinger').text('歌手：'+songObj.singer);
		$('.lyricSource').text('歌词来源：'+songObj.source);
		$('#cover img').attr('src',songObj.cover);
		/* 显示歌词 */
		/* musicData里面的lyric */
		/* songObj.lyric == lrcs[下标].song */
		/* 在lrcs中找于musicData相匹配的数据 */
		var lyricObj = lrcs.find(function(item){
			return songObj.lyric == item.song
		})
		/* 获取歌词 */
		$('#lyricUl').empty();
		lyricObj.lyric.forEach(function(item){
			var li = $(`<li startTime=${item.time}>${item.lineLyric}</li>`);
			$('#lyricUl').append(li)
		})
	}
/* -----------------------------------用户登录-------------------------------------- */
	/* 给登录按钮绑定点击事件 */
	$('#enter').click(function(){
		/* 遮罩层 */
		$('.midst').show();
		/* 切换功能 */
		$('.login').toggle();
		/* 获取本地登录数据 */
		/* 获取的时候 声明的name要与括号内的一致 */
		/* 根据登录以后是否记得密码将数据储存到本地的用户名和密码来获取
		 * 也就是说，没有登录且没有勾选记得密码是无法获取到数据
		 * */
		var  userName = window.localStorage.getItem('userName');
		var  password = window.localStorage.getItem('password');
		if(userName){
			$('#user').val(userName);
			$('#psw').val(password);
			$('#remember').prop('checked',true);
		}
	})
	/* 关闭图片 */
	$('.shut').click(function(){
		/* 遮罩层 */
		$('.midst').hide();
		/* 切换功能 */
		$('.login').hide();
	})
	/* 登录界面的的按钮添加点击事件 */
	$('#userEnter').click(function(){
		/* 将用户输入的信息获取到 */
		var enterName = $('#user').val();
		var enterPsw = $('#psw').val();
		var checked = $('#remember').prop('checked');
		/* 记录登录数据 */
		/* 记录的时候，括号内保存的键名要与获取时的一致 */
		/* 如果是记住密码，那么将用户的信息保存到本地 
		*  下次登录显示登录数据*/
		if(checked){
			window.localStorage.setItem('userName',enterName);
			window.localStorage.setItem('password',enterPsw);
		/* 如果不记住密码，下次打开登录界面就不显示上次登录数据 */
		}else{
			window.localStorage.removeItem('userName');
			window.localStorage.removeItem('password');
		}
		/* 验证登录信息 */
		var isOK = false;
		users.forEach(function(item){
			if(enterName == item.name){
				if(enterPsw == item.pwd){
					isOK = true;
					alert('登录成功')
					$("#enter").text(''+enterName);
					$('.midst').hide();
					$('.login').hide();
				}
			}
		})
		isOK || alert('密码有误，请重新输入')
	})
	
/* -----------------------------------显示桌面歌词-------------------------------------- */
	var showOrHide = $('#lyrics');
	var boxWindowSongerMode = $('.boxWindowSonger');
	var isOk = 0;
	showOrHide.click(function(){
		if(isOk === 0){
			boxWindowSongerMode.show();
			showOrHide.prop('title','隐藏桌面歌词');
			isOk = 1;
		}else{
			boxWindowSongerMode.hide();
			showOrHide.prop('title','显示桌面歌词');
			isOk = 0;
		}
	})
	
})